<template>
    <section class="w-full h-full">
        <p class="page-title">菜单配置</p>
        <el-row class="h-full">
            <el-col :span="7" class="b-r h-full">
                <el-scrollbar :native=false wrapStyle="" wrapClass="" viewClass="" viewStyle="" :noresize=false tag="section">
                    <el-tree
                            :data="treeData"
                            ref="routerTree"
                            node-key="id"
                            default-expand-all
                            @node-click="selectRouter"
                            :expand-on-click-node="false"
                    >
                        <p class="custom-tree-node w-full"
                           justify="space-between"
                           slot-scope="{ node, data }"
                           @mouseenter.stop="mouseenterNode(node,data)"
                           @mouseleave.stop="mouseleaveNode(node,data)">
                            <el-col :span="20">{{ node.label }}</el-col>
                            <el-col :span="4">
                                <el-button
                                        v-show="node.btnVisible"
                                        type="text"
                                        size="mini"
                                        @click.stop="addRouter(data)">
                                    新增下级
                                </el-button>
                            </el-col>
                        </p>
                    </el-tree>
                </el-scrollbar>
            </el-col>
            <el-col :span="16" :offset="1">
                <el-table
                        :data="tableData"
                        highlight-current-row
                        max-height="528"
                >
                    <el-table-column
                            label="菜单名称"
                            width="120">
                        <template slot-scope="scope">
                            <span>{{ scope.row.funName }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="菜单路由路径"
                            width="120">
                        <template slot-scope="scope">
                            <el-popover trigger="hover" placement="top">
                                <p>菜单路由路径: {{ scope.row.funPath }}</p>
                                <div slot="reference" class="name-wrapper">
                                    <el-tag size="medium">{{ scope.row.funPath }}</el-tag>
                                </div>
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="菜单绝对路径"
                            width="220">
                        <template slot-scope="scope">
                            <el-popover trigger="hover" placement="top">
                                <p>菜单绝对路径: {{ scope.row.funAbsPath }}</p>
                                <div slot="reference" class="name-wrapper">
                                    <el-tag size="medium">{{ scope.row.funAbsPath }}</el-tag>
                                </div>
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="菜单组件地址"
                            width="220">
                        <template slot-scope="scope">
                            <el-popover trigger="hover" placement="top">
                                <p>菜单组件地址: {{ scope.row.funContent }}</p>
                                <div slot="reference" class="name-wrapper">
                                    <el-tag size="medium">{{ scope.row.funContent }}</el-tag>
                                </div>
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="菜单图标"
                            width="80">
                        <template slot-scope="scope">
                            <el-popover trigger="hover" placement="top">
                                <p>图标代码: {{ scope.row.funIcon }}</p>
                                <div slot="reference" class="name-wrapper">
                                    <el-tag size="medium"><i :class=scope.row.funIcon></i></el-tag>
                                </div>
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="菜单序号"
                            width="80">
                        <template slot-scope="scope">
                            <span>{{ scope.row.funSeqno }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    @click="updateRouter(scope.row)">编辑
                            </el-button>
                            <el-button
                                    size="mini"
                                    type="danger"
                                    @click="deleteRouter(scope.row)">删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
            <el-dialog :title="FormTitle" :visible.sync="routerDialogVisible" width="40%" :close-on-click-modal=false @close="closeDialog">
                <el-form :model="routerForm"
                         status-icon
                         :rules="routerFormRules"
                         ref="routerForm"
                         v-show="'page'== funType"
                         label-width="120px">
                    <el-form-item label="父节点">
                        <el-input v-model="parentRouterName" readonly></el-input>
                    </el-form-item>
                    <el-form-item label="菜单名称" prop="funName">
                        <el-input v-model="routerForm.funName" autocomplete="off" ></el-input>
                    </el-form-item>
                    <el-form-item label="菜单路由路径" prop="funPath">
                        <el-input v-model="routerForm.funPath" autocomplete="off" ></el-input>
                    </el-form-item>
                    <el-form-item label="菜单绝对路径" prop="funAbsPath">
                        <el-input v-model="routerForm.funAbsPath" autocomplete="off" ></el-input>
                    </el-form-item>
                    <el-form-item label="菜单组件路径" prop="funContent">
                        <el-input v-model="routerForm.funContent" autocomplete="off" ></el-input>
                    </el-form-item>
                    <el-form-item label="类型" >
                        <el-select
                                class="w-full"
                                v-model="routerForm.funType"
                                placeholder="请选择类型"
                                ref="funTypeSelect"
                                :disabled="'update'==addOrUpdate">
                            <el-option
                                    v-for="item in funcType"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="图标" prop="funIcon">
                        <el-input v-model="routerForm.funIcon" autocomplete="off" ></el-input>
                    </el-form-item>
                    <el-form-item label="序号" prop="funSeqno">
                        <el-input v-model="routerForm.funSeqno" autocomplete="off" ></el-input>
                    </el-form-item>
                    <input v-model="routerForm.parentId" type="hidden">
                    <input v-model="routerForm.funId" type="hidden">
                </el-form>
                <el-form :model="buttonForm"
                         status-icon :rules="buttonFormRules"
                         ref="buttonForm"
                         v-show="'button'== funType"
                         label-width="120px">
                    <el-form-item label="父节点">
                        <el-input v-model="parentRouterName" readonly></el-input>
                    </el-form-item>
                    <el-form-item label="按钮名称" prop="funName">
                        <el-input v-model="buttonForm.funName" autocomplete="off" ></el-input>
                    </el-form-item>
                    <el-form-item label="图标" prop="funIcon">
                        <el-input v-model="buttonForm.funIcon" autocomplete="off" ></el-input>
                    </el-form-item>
                    <el-form-item label="序号" prop="funSeqno">
                        <el-input v-model="buttonForm.funSeqno" autocomplete="off" ></el-input>
                    </el-form-item>
                    <input v-model="buttonForm.parentId" type="hidden">
                    <input v-model="buttonForm.funId" type="hidden">
                    <input v-model="buttonForm.funType" type="hidden">
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="cancelRouterForm">取 消</el-button>
                    <el-button type="primary" @click="addOrUpdateRouter()">保 存</el-button>
                </div>
            </el-dialog>
        </el-row>
    </section>
</template>

<script>
    export default {
        name: "routerManager",
        data() {
            return {
                tableData: [],
                treeData: [],
                routerDialogVisible: false,
                routerForm: {
                    funId: '',
                    funPath: '',
                    funAbsPath: '',
                    funName: '',
                    funContent: '',
                    funIcon: '',
                    funSeqno: '',
                    parentId: '',
                    funType: 'page'
                },
                routerFormRules: {
                    funPath: [
                        { required: true, message: '请输入菜单路由配置路径', trigger: 'blur' }
                    ],
                    funAbsPath: [
                        { required: true, message: '请输入菜单绝对路径', trigger: 'blur' }
                    ],
                    funName: [
                        { required: true, message: '请输入菜单名称', trigger: 'blur' }
                    ],
                    funContent: [
                        { required: true, message: '请输入菜单组件路径', trigger: 'blur' }
                    ],
                    funIcon: [
                        { required: true, message: '请输入菜单图标', trigger: 'blur' }
                    ],
                    funSeqno: [
                        { required: true, message: '请输入菜单序号', trigger: 'blur' }
                    ],
                },
                buttonForm: {
                    funId: '',
                    funPath: '',
                    funName: '',
                    funContent: '',
                    funIcon: '',
                    funSeqno: '',
                    parentId: '',
                    funType: 'button'
                },
                buttonFormRules: {
                    funName: [
                        { required: true, message: '请输入路由名称', trigger: 'blur' }
                    ],
                    funSeqno: [
                        { required: true, message: '请输入路由序号', trigger: 'blur' }
                    ],
                },
                addOrUpdate: "",
                parentRouterName: "",
                FormTitle: "",
                funcType: [{
                    value: 'page',
                    label: '页面'
                }, {
                    value: 'button',
                    label: '按钮'
                }],
                funType: 'page'
            }
        },
        created() {
            this.getRouters();
        },
        methods: {
            addRouter(data) {
                if(null==data) {
                    this.$message({
                        message: '未选中任何节点',
                        type: 'warning'
                    });
                }
                this.routerForm.parentId = data.funId;
                this.parentRouterName = data.label;
                this.addOrUpdate = "add";
                this.FormTitle = "新增子项"
                this.routerDialogVisible=true;
            },
            addOrUpdateRouter() {
                this.$refs["routerForm"].validate(async (valid) => {
                    if (valid) {
                        let data = this.$qs.stringify(this.routerForm)
                        if("add"==this.addOrUpdate) {
                            await this.$http({
                                url: '/function/function',
                                method: 'POST',
                                data: data
                            })
                            this.$message({
                                message: '新增菜单成功',
                                type: 'success'
                            });
                            this.getRouters();
                            this.routerDialogVisible = false;
                            this.resetRouterForm();
                        }else {
                            await this.$http({
                                url: '/function/function',
                                method: 'PUT',
                                data: data
                            })
                            this.$message({
                                message: '修改菜单成功',
                                type: 'success'
                            });
                            this.tableData = [await this.$http({
                                url: `/function/function/${this.routerForm.funId}`,
                                method: 'GET',
                            })]
                            this.routerDialogVisible = false;
                            this.resetRouterForm();
                        }
                    } else {
                        return false;
                    }
                });
            },
            updateRouter(row) {
                this.funType = row.funType;
                this.parentRouterName = row.label;
                if("page"==this.funType) {
                    this.routerForm.funId = row.funId;
                    this.routerForm.funPath = row.funPath;
                    this.routerForm.funAbsPath = row.funAbsPath;
                    this.routerForm.funName = row.funName;
                    this.routerForm.funContent = row.funContent;
                    this.routerForm.parentId = row.parentId;
                    this.routerForm.funIcon = row.funIcon;
                    this.routerForm.funSeqno = row.funSeqno;
                    this.routerForm.funType = row.funType;
                    this.FormTitle = "修改菜单";
                }else {
                    this.buttonForm.funId = row.funId;
                    this.buttonForm.funName = row.funName;
                    this.buttonForm.parentId = row.parentId;
                    this.buttonForm.funIcon = row.funIcon;
                    this.buttonForm.funSeqno = row.funSeqno;
                    this.buttonForm.funType = row.funType;
                    this.FormTitle = "修改按钮";
                }
                this.addOrUpdate = "update";
                this.routerDialogVisible=true;
            },
            async deleteRouter(row) {
                await this.$http({
                    url: `/function/function/${row.funId}`,
                    method: 'DELETE',
                })
                this.$message({
                    message: '删除菜单成功',
                    type: 'success'
                });
                this.getRouters();
                this.routerDialogVisible = false;
                this.resetRouterForm();
            },
            async selectRouter(router){
                this.tableData = [await this.$http({
                    url: `/function/function/${router.id}`,
                    method: 'GET',
                })]
            },
            cancelRouterForm() {
                this.routerDialogVisible = false;
            },
            resetRouterForm(){
                this.routerForm={
                    funId: '',
                    funPath: '',
                    funAbsPath: '',
                    funName: '',
                    funContent: '',
                    funIcon: '',
                    funSeqno: '',
                    parentId: '',
                    funType: 'page'
                }
                this.$refs.routerForm.resetFields();
            },
            async getRouters() {
                this.treeData = await this.$http({
                    url: '/function/getFunctionsElementTree',
                    method: 'GET',
                })
            },
            mouseenterNode(node,data) {
                if("首页" == data.funName) return;
                this.$set(node,'btnVisible',true);
            },
            mouseleaveNode(node,data) {
                if("首页" == data.funName) return;
                this.$set(node,'btnVisible',false);
            },
            closeDialog() {
                this.resetRouterForm();
            }
        }
    }
</script>

<style scoped>
</style>